<script setup>
import { ref } from 'vue'
import api from '../api/index.js'
import { ElMessage } from 'element-plus'

const data = ref({
    'username': '',
    'password': ''
});

const loginFormRef = ref(null);

const rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ]
}

async function doLogin() {
    const valid = await loginFormRef.value.validate();
    if (valid) {
        api.login(data.value.username, data.value.password).then(res => {
            console.log(res);
        }).catch(err => {
            console.error(err);
        });
        return true;
    }
    return false;
}



</script>

<template>
    <el-row justify="center" align="middle" class="full-screen text-center">
        <el-col :xs="20" :sm="16" :md="12" :lg="8" :xl="6">
            <h1>数据中心管理后台</h1>
            <el-form size="large" ref="loginFormRef" :rules="rules" :model="data">
                <el-form-item prop="username">
                    <el-input v-model="data.username" placeholder="用户名" clearable/>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="data.password" type="password" placeholder="密码" show-password clearable/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 100%;" @click="doLogin">登录</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>

<style scoped>
h1 {
    position: relative;
    top: -20px;
}
</style>